<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-17 15:07:53
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-09 11:44:50
 * @FilePath: \cxl-h5\src\pages\personalCenter\invoice\order\Index.vue
-->
<template>
    <section class="invoice-order-container">
        <section class="box">
            <section class="block">
                <section class="li" v-for="item in list" :key="item">
                    <section class="order-title">
                        <h1 v-if="item.packageNameNumber">
                            {{ productTypeMap.get(item.productType + '') }}车况 -
                            {{ packageNameMap.get(item.packageNameNumber + '') }}
                        </h1>
                        <h1 v-else>
                            <template v-if="item.modelDetail">{{ item.modelDetail }}</template>
                            <template v-else>{{ item.brand }}</template>
                        </h1>
                    </section>
                    <section class="order-num">订单号：{{ item.orderNo }}</section>
                    <section class="order-date">支付时间：{{ item.payTime }}</section>
                </section>
            </section>
        </section>
    </section>
</template>

<script setup lang="ts">
import { storage } from '@/store/sessionStorage'
import useWeixinSdk from '@/utils/WXSdk'
import { onMounted, reactive } from 'vue'
import { packageNameMap, productTypeMap } from '@/utils/config'

const list: any[] = reactive([])
onMounted(() => {
    list.push(...JSON.parse(storage.get('invoiceDetailedOrder')))

    useWeixinSdk.disableShare()
})
</script>

<style scoped lang="scss">
.invoice-order-container {
    height: 100vh;
    background-color: var(--cxl-color-f2f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.box {
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    .block {
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-6);
        margin: var(--cxl-size-16) 0;

        .li {
            box-sizing: border-box;
            padding: var(--cxl-size-16);
            &:not(:last-child) {
                border-bottom: 1px solid var(--cxl-color-f0f0f0);
            }

            .order-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                h1 {
                    font-size: var(--cxl-size-15);
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                > span {
                    &:nth-child(1) {
                        font-weight: 600;
                        font-size: var(--cxl-size-15);
                        width: calc(100% - 6rem);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    &:nth-child(2) {
                        width: 6rem;
                        font-weight: 600;
                        text-align: right;
                        font-size: var(--cxl-size-18);
                        color: var(--cxl-color-primary);
                        i {
                            font-size: var(--cxl-size-14);
                        }
                    }
                }
            }

            .order-num {
                font-size: var(--cxl-size-12);
                margin: var(--cxl-size-6) 0;
            }
            .order-date {
                font-size: var(--cxl-size-12);
                color: var(--cxl-color-999999);
            }
        }
    }
}
</style>
